import React, { useState } from 'react'

export default function App() {
  const [count, setCount] = useState(0);
  const [isHot, setIshot] = useState(true);
  const [person, setPerson] = useState([
    { id: "001", name: "沈阳大街", age: "18" },
    { id: "002", name: "没有你", age: "23" },
    { id: "003", name: "好果汁吃", age: "3" },
  ]);

  const setCountHandle = () => {
    setCount(count + 1)
  }

  const setIshotHandle = () => {
    setIshot(!isHot)
  }

  const setPersonHandle = () => {
    setPerson([...person,{id: Date.now() , name: "666" , age: Date.now()}])
  }


  return (
    <div>
      <h1>count的值是{count}</h1>
      <button onClick={setCountHandle}>累加</button>

      <hr />

      <h1>今天天气真{isHot ? "热" : "冷"}啊</h1>
      <button onClick={setIshotHandle}>切换天气</button>

      <hr />

      <button onClick = {setPersonHandle}>添加数据</button>
      <ul>
        {
          person.map(item => {
            return <li key = {item.id}>姓名:{item.name}  年龄:{item.age}</li>
          })
        }
      </ul>
    </div>
  )
}
